﻿@{
    ViewBag.Title = "Invoice";
}

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <div class="space-6"></div>

            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="widget-box transparent invoice-box">
                        <div class="widget-header widget-header-large">
                            <h3 class="grey lighter pull-left position-relative">
                                <i class="icon-leaf green"></i>
                                Customer Invoice
                            </h3>

                            <div class="widget-toolbar no-border invoice-info">
                                <span class="invoice-info-label">Invoice:</span>
                                <span class="red">#121212</span>

                                <br />
                                <span class="invoice-info-label">Date:</span>
                                <span class="blue">03/03/2013</span>
                            </div>

                            <div class="widget-toolbar hidden-480">
                                <a href="#">
                                    <i class="icon-print"></i>
                                </a>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main padding-24">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="row">
                                            <div class="col-xs-11 label label-lg label-info arrowed-in arrowed-right">
                                                <b>Company Info</b>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <ul class="list-unstyled spaced">
                                                <li>
                                                    <i class="icon-caret-right blue"></i>
                                                    Street, City
                                                </li>

                                                <li>
                                                    <i class="icon-caret-right blue"></i>
                                                    Zip Code
                                                </li>

                                                <li>
                                                    <i class="icon-caret-right blue"></i>
                                                    State, Country
                                                </li>

                                                <li>
                                                    <i class="icon-caret-right blue"></i>
                                                    Phone:
																		<b class="red">111-111-111</b>
                                                </li>

                                                <li class="divider"></li>

                                                <li>
                                                    <i class="icon-caret-right blue"></i>
                                                    Paymant Info
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- /span -->

                                    <div class="col-sm-6">
                                        <div class="row">
                                            <div class="col-xs-11 label label-lg label-success arrowed-in arrowed-right">
                                                <b>Customer Info</b>
                                            </div>
                                        </div>

                                        <div>
                                            <ul class="list-unstyled  spaced">
                                                <li>
                                                    <i class="icon-caret-right green"></i>
                                                    Street, City
                                                </li>

                                                <li>
                                                    <i class="icon-caret-right green"></i>
                                                    Zip Code
                                                </li>

                                                <li>
                                                    <i class="icon-caret-right green"></i>
                                                    State, Country
                                                </li>

                                                <li class="divider"></li>

                                                <li>
                                                    <i class="icon-caret-right green"></i>
                                                    Contact Info
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- /span -->
                                </div>
                                <!-- row -->

                                <div class="space"></div>

                                <div>
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th class="center">#</th>
                                                <th>Product</th>
                                                <th class="hidden-xs">Description</th>
                                                <th class="hidden-480">Discount</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr>
                                                <td class="center">1</td>

                                                <td>
                                                    <a href="#">google.com</a>
                                                </td>
                                                <td class="hidden-xs">1 year domain registration
                                                </td>
                                                <td class="hidden-480">--- </td>
                                                <td>$10</td>
                                            </tr>

                                            <tr>
                                                <td class="center">2</td>

                                                <td>
                                                    <a href="#">yahoo.com</a>
                                                </td>
                                                <td class="hidden-xs">5 year domain registration
                                                </td>
                                                <td class="hidden-480">5% </td>
                                                <td>$45</td>
                                            </tr>

                                            <tr>
                                                <td class="center">3</td>
                                                <td>Hosting</td>
                                                <td class="hidden-xs">1 year basic hosting
                                                </td>
                                                <td class="hidden-480">10% </td>
                                                <td>$90</td>
                                            </tr>

                                            <tr>
                                                <td class="center">4</td>
                                                <td>Design</td>
                                                <td class="hidden-xs">Theme customization
                                                </td>
                                                <td class="hidden-480">50% </td>
                                                <td>$250</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="hr hr8 hr-double hr-dotted"></div>

                                <div class="row">
                                    <div class="col-sm-5 pull-right">
                                        <h4 class="pull-right">Total amount :
																<span class="red">$395</span>
                                        </h4>
                                    </div>
                                    <div class="col-sm-7 pull-left">Extra Information </div>
                                </div>

                                <div class="space-6"></div>
                                <div class="well">
                                    Thank you for choosing Ace Company products.
					We believe you will be satisfied by our services.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

@section cssPagePlugin {
}
@section styles {
}
@section jsPagePlugin {
}